<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition 
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:a4j="http://richfaces.org/a4j"
    xmlns:rich="http://richfaces.org/rich" >
    
    <f:view contentType="text/html">
    
    	<h:head>
			<title>UsaPré</title>
			<ui:insert name="js"/>
			<ui:insert name="css"/>
		</h:head>	
		
		<h:body>
		
				<a4j:status onstart="#{rich:component('statPane')}.show()" onstop="#{rich:component('statPane')}.hide()" /> 
				<rich:popupPanel id="statPane" autosized="true"> 
					<h:outputText value="Aguarde..." styleClass="output-style"/> 
				</rich:popupPanel> 
		
				<h:panelGroup id="mensagens">
					<h:outputScript rendered="#{not empty facesContext.messageList}">
						<a4j:repeat value="#{facesContext.messageList}" var="message">
							alert("<h:outputText value="#{message.summary}" />");
						</a4j:repeat>
					</h:outputScript>
				</h:panelGroup>
				
				<div class="conteiner">
					<div class="topo">
				        <div class="logo" align="center">
				        	<ui:insert name="linkusa"></ui:insert>
				        </div>
				        <div class="divisor"><img src="images/divisor_vertical_topo.gif" width="2" height="96" /></div>
				        <div class="menu_sup">
				       	  <div class="menu_sup_text" align="center">
				       	  	<ui:insert name="linksup1"></ui:insert>
				       	  </div>
						</div>
				        <div class="divisor"><img src="images/divisor_vertical_topo.gif" width="2" height="96" /></div>
				        <div class="menu_sup">
				          <div class="menu_sup_text_" align="center">
				          	<ui:insert name="linksup2"></ui:insert>
				          </div>
				      </div>
				        <div class="divisor"><img src="images/divisor_vertical_topo.gif" width="2" height="96" /></div>
				        <div class="menu_sup">
				          <div class="menu_sup_text" align="center">
				          	<ui:insert name="linksup3"></ui:insert>
				          </div>
				        </div>
				        <div class="divisor"><img src="images/divisor_vertical_topo.gif" width="2" height="96" /></div>
				        <div class="menu_sup">
				          <div class="menu_sup_text_" align="center">
				          	<ui:insert name="linksup4"></ui:insert>
				          </div>
				        </div>
				        <div class="divisor"><img src="images/divisor_vertical_topo.gif" width="2" height="96" /></div>
				        <div class="menu_login">
				       	  <ui:insert name="login"></ui:insert>
				        </div>
					</div>
				    <div class="banner">
				    	<ui:insert name="banner"></ui:insert>
				    </div>
				    <div class="submenu_area">
	
				   	  <div class="submenu_top2" id="link3">
				   	  	<ui:insert name="conteiner1"></ui:insert>
				   	  </div>
				   	  <div class="submenu_top2" id="link3">
				   	  	<ui:insert name="conteiner2"></ui:insert>
				   	  </div>
				   	  <div class="submenu_top2" id="link3">
				   	  	<ui:insert name="conteiner3"></ui:insert>
				   	  </div>
				   	  <div class="submenu_top2" id="link3">
				   	  	<ui:insert name="conteiner4"></ui:insert>
				   	  </div>
				   	  <div class="submenu_top2" id="link3">
				   	  	<ui:insert name="conteiner5"></ui:insert>
				   	  </div>
				   	  
				   	  <ui:insert name="interior"></ui:insert>
				   	  
				  </div>
				  <div class="over_rodape"></div>
				  <div class="rodape">
					<div class="rodape_part1"><img src="images/rodape1.gif" width="246" height="57" /></div>
					<div class="rodape_separador"></div>
					<div class="rodape_part2">
					
						<img src="images/rodape2_over_01.jpg" alt="" width="400" height="13" />
						<a href="#" onmouseout="jQuery('#imgtwitterin').show(); jQuery('#imgtwitterout').hide();" 
								    onmouseover="jQuery('#imgtwitterin').hide(); jQuery('#imgtwitterout').show();" >
							<img src="images/rodape2_normal_02.jpg" id="imgtwitterin"  width="95" height="44" border="0" />
							<img src="images/rodape2_over_02.gif"   id="imgtwitterout" width="95" height="44" border="0" style="display:none;" />
						</a>
						<a href="#" onmouseout="jQuery('#facebookin').show(); jQuery('#facebookout').hide();" 
								    onmouseover="jQuery('#facebookin').hide(); jQuery('#facebookout').show();" >
							<img src="images/rodape2_normal_03.jpg" id="facebookin" alt="" width="95" height="44" border="0" />
							<img src="images/rodape2_over_03_.gif"  id="facebookout" alt="" width="95" height="44" border="0" style="display:none;" />
						</a>
						<a href="#" onmouseout="jQuery('#mugbeein').show(); jQuery('#mugbeeout').hide();" 
								    onmouseover="jQuery('#mugbeein').hide(); jQuery('#mugbeeout').show();" >
							<img src="images/rodape2_normal_04.jpg" id="mugbeein" width="117" height="44" border="0" />
							<img src="images/rodape2_over_04.jpg"   id="mugbeeout" width="117" height="44" border="0" style="display:none;" />
						</a>
						<a href="#" onmouseout="jQuery('#youtubein').show(); jQuery('#youtubeout').hide();" 
								    onmouseover="jQuery('#youtubein').hide(); jQuery('#youtubeout').show();" >
							<img src="images/rodape2_normal_05.jpg" id="youtubein" width="79" height="44" border="0" />
							<img src="images/rodape2_over_05.jpg"   id="youtubeout" width="79" height="44" border="0" style="display:none;" />
						</a>
					
					
					</div>
					<div class="rodape_separador"></div>
				    <div class="rodape_part3">SAC/OUVIDORIA 0300-210-4001</div>
				  </div>
				</div>
				
			
		
		</h:body>
		
	</f:view>
	
</ui:composition>
